<template>
    <div>
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{address}}</p>
        <p>{{fullName}}</p>
        <button @click="change('李四')">改变名字</button>
        <button @click="move('XX')">改变地址</button>
        <button @click="changeAge1">改变年龄</button>
    </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        computed:{
        //    testStr(){
        //         return this.$store.state.name
        //     }
            ...mapState(['name','age','address']),
            // fullName(){
            //     return this.$store.getters.fullName
            // }
            ...mapGetters(['fullName'])
        },
        methods:{
            // down(){
            //     this.$store.commit('change','李四')
            // }
            ...mapMutations(['change','move']),

            changeAge1(){
                // this.$store.dispatch('changeAge',50)

                //和下文  "...mapActions(['changeAge'])"  连用
                this.changeAge(50)
            },
            ...mapActions(['changeAge'])
        }
    }
</script>

<style scoped>

</style>